<!--审核流程进度-->
<!--
    1 领取 2 释放 3 通过 4 拒绝 5 转审 6 驳回 7 申诉 8 提交 9 完结
    合同：     1004 线上确认合同 1005 签署合同 1006 邮寄合同 1007 入驻完成
    渠道信息提交：1008 营业执照提交 1009 法人信息提交 1010 法人手机号校验 1011 公户信息提交
    工商办理：  1999 处理意见 2000 业务终止 2001 核名通过 2002 核名失败 2003 办理完成
    税务登记：  2004 办理失败 2005 办理完成 2006 处理意见
    银行开户：  2007 办理失败 2008 办理完成 2009 处理意见
    税务变更：  3001 办理失败 3002 办理完成 3003 处理意见
    电子签章：  5001 办理失败 5002 办理完成 5003 处理意见
-->
<template>
  <div class="AuditProcess-box" style="max-height: 300px;overflow-y: auto;">
  <div style="position:sticky;top: 0;    background-color: white; padding: 10px 0;z-index: 100;">
    <span class="titleName">操作记录：</span>
  </div>
  <div style="padding: 10px;">
    <a-timeline mode="left" v-if="courseData.length > 0">

      <TimelineItem v-for="(item, index) in courseData" :key="index" :itemData="item"
        :auditProcessConfig="getAPConfig()" :event="attEvent"></TimelineItem>

      </a-timeline>
      <span v-else>
        暂无数据
      </span>
    </div>
    <!-- <previewShow v-bind="previewShowConfig" :event="modalHidden"></previewShow> -->
    <p-PreviewShow v-bind="previewShowConfig" :showHelp="false" :event="modalHidden"></p-PreviewShow>
  </div>
</template>

<script>
import getDataForDB from '@/api/AuditProcessAPI'
// import { getQueryWorkRecord } from '@/api/auditTeamList'

//#region  数据结构说明
// const auditProcessList = [
// {
//     opType: '默认',
//     // 最左侧 图标
//     icon: { class: ['icon-icon-daishenhe', 'gray'] },
//     content: {
//       // 节点名称
//       // label 表示审批节点的名称，如：提交审核  当此值为空时调用 dataKey值
//       // dataKey 表示 接口返回的字段名称   当label 为空时使用
//       nodeName: { class: ['gray'], label: '', dataKey: 'opTypeDesc' },
//       // 审批人信息
//       // label  labelKey 表示当前节点操作名称  label 表示固定内容  labelKey 表示接口指定字段名称
//       // value valueKey  表示当前节点操作名称对应的值 value 表示固定内容  valueKey 表示接口指定字段名称
//       approverInfo: { label: '操作人：', labelKey: '', value: '', valueKey: 'opUserName' },
//       // 审批意见信息
//       // labelRuleFun  valueRuleFun 表示自定义获取  label 或 value 的值的方法
//       approvalComments: {
//         labelRuleFun: labelRuleFun_,
//         valueRuleFun: null,
//         label: '', labelKey: '',
//         value: '', valueKey: 'opDesc',
//       },
//       // 用于扩展的自定义组件名称
//       customNameArr: []
//     }
//   },

// ]
//#endregion

const labelRuleFun_ = (nodeItem) => {
  let res = ''
  const { opType } = nodeItem
  const tempArr = [5, 6, 9]
  if (opType < 1000 && tempArr.indexOf(opType) < 0) {
    res = '审核意见：'
  }
  if (opType > 1000) {
    res = '处理意见：'
  }
  return res
}

const aiLabelRuleFun_ = (nodeItem) => {
  let res = '操作人'
  const { opType, opUserName } = nodeItem
  const temp = { 5: '转审给', 6: '驳回给' }
  if (temp[opType]) {
    res = opUserName + temp[opType]
  }
  return res
}

const auditProcessConfig = [
  {
    "opType": "3",
    "icon": { "class": ["icon-icon-shenhetongguo green"] },
    "content": {
      "nodeName": { "class": ["green"], "label": "审核通过", "dataKey": "" },
      "approverInfo": { "labelRuleFun": aiLabelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "4",
    "icon": { "class": ["icon-icon-shenhejujue red"] },
    "content": {
      "nodeName": { "class": ["red"], "label": "审核拒绝", "dataKey": "" },
      "approverInfo": { "labelRuleFun": aiLabelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "5",
    "icon": { "class": ["icon-icon-zhuanshen blue"] },
    "content": {
      "nodeName": { "class": ["blue"], "dataKey": "" },
      "approverInfo": { "labelRuleFun": aiLabelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": null, "valueRuleFun": null, "label": "转审备注：", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "6",
    "icon": { "class": ["icon-icon-bohui red"] },
    "content": {
      "nodeName": { "class": ["red"], "dataKey": "opTypeDesc" },
      "approverInfo": { "labelRuleFun": aiLabelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": null, "valueRuleFun": null, "label": "驳回原因：", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "7",
    "icon": { "class": ["icon-icon-zhuanshen red"] },
    "content": {
      "nodeName": { "class": ["red"], "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "提交人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "8",
    "icon": { "class": ["icon-icon-tijiao blue"] },
    "content": {
      "nodeName": { "class": ["blue"], "label": "提交审核", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "提交人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "9",
    "icon": { "class": ["icon-icon-shenhetongguo blue"] },
    "content": {
      "nodeName": { "class": ["blue"], "label": "流程完结", "dataKey": "" },
      "approverInfo": { "labelRuleFun": aiLabelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": null, "valueRuleFun": null, "label": "备注：", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "1004",
    "icon": { "class": ["icon-icon-jinhangzhong orange"] },
    "content": {
      "nodeName": { "class": ["orange"], "label": "线上确认合同", "dataKey": "" },
      "approverInfo": { "labelRuleFun": aiLabelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "1005",
    "icon": { "class": ["icon-icon-jinhangzhong blue"] },
    "content": {
      "nodeName": { "class": ["blue"], "label": "签署合同", "dataKey": "" },
      "approverInfo": { "labelRuleFun": aiLabelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "1006",
    "icon": { "class": ["icon-icon-jinhangzhong blue"] },
    "content": {
      "nodeName": { "class": ["blue"], "label": "邮寄合同", "dataKey": "" },
      "approverInfo": { "labelRuleFun": aiLabelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "1007",
    "icon": { "class": ["icon-icon-shenhetongguo green"] },
    "content": {
      "nodeName": { "class": ["green"], "label": "入驻完成", "dataKey": "" },
      "approverInfo": { "labelRuleFun": aiLabelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "1008",
    "icon": { "class": ["icon-icon-tijiao blue"] },
    "content": {
      "nodeName": { "class": ["blue"], "label": "营业执照提交", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "提交人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "1009",
    "icon": { "class": ["icon-icon-tijiao blue"] },
    "content": {
      "nodeName": { "class": ["blue"], "label": "法人信息提交", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "提交人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "1010",
    "icon": { "class": ["icon-icon-jinhangzhong orange"] },
    "content": {
      "nodeName": { "class": ["orange"], "label": "法人手机号校验", "dataKey": "" },
      "approverInfo": { "labelRuleFun": aiLabelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "1011",
    "icon": { "class": ["icon-icon-tijiao blue"] },
    "content": {
      "nodeName": { "class": ["blue"], "label": "公户信息提交", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "提交人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "2004",
    "icon": { "class": ["icon-icon-shenhejujue red"] },
    "content": {
      "nodeName": { "class": ["red"], "label": "办理失败", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "办理人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "2005",
    "icon": { "class": ["icon-icon-shenhetongguo green"] },
    "content": {
      "nodeName": { "class": ["green"], "label": "办理完成", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "办理人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "2006",
    "icon": { "class": ["icon-icon-tijiaochuliyijian orange"] },
    "content": {
      "nodeName": { "class": ["orange"], "label": "处理意见", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "处理人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "2007",
    "icon": { "class": ["icon-icon-shenhejujue red"] },
    "content": {
      "nodeName": { "class": ["red"], "label": "办理失败", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "办理人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "2008",
    "icon": { "class": ["icon-icon-shenhetongguo green"] },
    "content": {
      "nodeName": { "class": ["green"], "label": "办理完成", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "办理人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "2009",
    "icon": { "class": ["icon-icon-tijiaochuliyijian orange"] },
    "content": {
      "nodeName": { "class": ["orange"], "label": "处理意见", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "处理人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "3001",
    "icon": { "class": ["icon-icon-shenhejujue red"] },
    "content": {
      "nodeName": { "class": ["red"], "label": "办理失败", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "办理人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "3002",
    "icon": { "class": ["icon-icon-shenhetongguo green"] },
    "content": {
      "nodeName": { "class": ["green"], "label": "办理完成", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "办理人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "3003",
    "icon": { "class": ["icon-icon-tijiaochuliyijian orange"] },
    "content": {
      "nodeName": { "class": ["orange"], "label": "处理意见", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "处理人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "5001",
    "icon": { "class": ["icon-icon-shenhejujue red"] },
    "content": {
      "nodeName": { "class": ["red"], "label": "办理失败", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "办理人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "5002",
    "icon": { "class": ["icon-icon-shenhetongguo green"] },
    "content": {
      "nodeName": { "class": ["green"], "label": "办理完成", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "办理人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "5003",
    "icon": { "class": ["icon-icon-tijiaochuliyijian orange"] },
    "content": {
      "nodeName": { "class": ["orange"], "label": "处理意见", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "处理人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "1109",
    "icon": { "class": ["icon-icon-shenhejujue red"] },
    "content": {
      "nodeName": { "class": ["red"], "label": "支付失败", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "处理人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "1102",
    "icon": { "class": ["icon-icon-shenhetongguo green"] },
    "content": {
      "nodeName": { "class": ["green"], "label": "支付成功", "dataKey": "" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "处理人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  },
  {
    "opType": "默认",
    "icon": { "class": ["icon-icon-daishenhe gray"] },
    "content": {
      "nodeName": { "class": ["gray"], "label": "", "dataKey": "opTypeDesc" },
      "approverInfo": { "labelRuleFun": null, "valueRuleFun": null, "label": "操作人", "labelKey": "", "value": "", "valueKey": "opUserName" },
      "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "", "labelKey": "", "value": "", "valueKey": "opDesc" },
      "customNameArr": ['Attachment']
    }
  }
]


const Attachment = {
  name: 'Attachment',
  props: {
    dataConfig: { type: [Object, String] },
    event: { type: Function }
  },
  data() {
    return {
      dataUrlArr: [
        // { name: '测试附件1', url: 'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/contract/1676534020933_3f03fb1f7586716b4bd110c91247306e.jpg' },
        // { name: '测试附件2', url: 'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/contract/1676534020933_3f03fb1f7586716b4bd110c91247306e.jpg' },
        // { name: '测试附件3', url: 'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/contract/1676534020933_3f03fb1f7586716b4bd110c91247306e.jpg' },
        // { name: '测试附件4', url: 'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/contract/1676534020933_3f03fb1f7586716b4bd110c91247306e.jpg' },
      ],

    }
  },
  watch: {
    dataConfig: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object String]') {
          //           qsb/contract/1677120609731_办公区照片.png -zxf- https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/contract/1677120609731_%E5%8A%9E%E5%85%AC%E5%8C%BA%E7%85%A7%E7%89%87.png
          // =zxf=
          // qsb/contract/1677120609731_办公区照片.png -zxf- https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/contract/1677120609731_%E5%8A%9E%E5%85%AC%E5%8C%BA%E7%85%A7%E7%89%87.png
          // this.AddWatermark.adddWatermark(val).then(res=>{
          //   this.dataUrl = res
          // })

          this.dataUrlArr = []
          val.split('=zxf=').forEach(async item => {
            const ttArr = item.split('-zxf-')
            // const res = await this.AddWatermark.addWatermark(ttArr[1])
            //  .then(res => {
            //     // res.suffix
            //     // this.previewShowConfig.url = res.url
            //     tempArr.push({ name: ttArr[0], url: res.url, suffix: res.suffix },)
            //   })
            // this.dataUrlArr.push({ name: ttArr[0], url: res.url, suffix: res.suffix })
            const suffix = ttArr[1].split('.')
            this.dataUrlArr.push({ name: ttArr[0], url: ttArr[1], suffix: suffix[suffix.length - 1] })
          })
          // console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@', val, val.split('=zxf=')[0].split('-zxf-'));
          // this.dataUrlArr = tempArr
        }

      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    showAttachment(item) {
      if (item.url) {
        this.event && this.event(item)
      }
    },
    getAttItem() {
      const { dataUrlArr, aStyle } = this

      return dataUrlArr.map(item => {
        return <a style="padding:5px;" onClick={() => { this.showAttachment(item) }}>{item.name}</a>
      })
    }
  },
  render: function (h) {
    return <span>{this.getAttItem()}</span>
  }
}

const TimelineItem = {
  props: {
    itemData: { type: Object },
    auditProcessConfig: { type: Array },
    event: { type: Function }
  },
  components: { Attachment },
  data() {
    return {
      APCObj: {}
    }
  },
  watch: {
    auditProcessConfig: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Array]') {
          const tempObj = {}
          val.forEach(item => {
            const { opType } = item
            tempObj[opType] = { ...item }
          });
          this.APCObj = tempObj
        }
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    /**
     * 节点图标
     * @param {*} opType
     */
    getIconHtml(opType) {
      const { icon } = this.APCObj[opType] || this.APCObj['默认']
      return <i slot="dot" class={'iconfont ' + icon.class.join(' ')}></i>
    },
    /**
     * 节点名称
     * @param {*} opType
     */
    getNodeNameHtml(opType) {
      const { itemData } = this
      const { content: { nodeName } } = this.APCObj[opType] || this.APCObj['默认']
      const tempNodeName = nodeName.label || itemData[nodeName.dataKey] || nodeName.labelRuleFun && nodeName.labelRuleFun(itemData)
      // class="name"
      return <span class={'name ' + nodeName.class.join(' ')}> {tempNodeName}</span>
    },
    /**
     * 审批人信息
     * @param {*} opType
     */
    getApproverInfoHtml(opType) {
      const { itemData } = this
      const { content: { approverInfo } } = this.APCObj[opType] || this.APCObj['默认']
      // "approverInfo": { "labelRuleFun": null, "valueRuleFun": null,
      // "label": "", "labelKey": "", "value": "", "valueKey": "opUserName" },
      const tempName = approverInfo.label || itemData[approverInfo.labelKey] || approverInfo.labelRuleFun && approverInfo.labelRuleFun(itemData)
      const tempValue = approverInfo.value || itemData[approverInfo.valueKey] || approverInfo.valueRuleFun && approverInfo.valueRuleFun(itemData)
      // fork
      return <p>
        <a-tag color="blue"><a-icon type="apartment" /><j-ellipsis value={itemData.flowName} length={15} /></a-tag>
        {/* <span style="margin:10px 0 10px 10px" class="title">
          <a-icon type="audit" />{tempName}
        </span> */}
        <a-tag color="cyan">
          <a-icon type="user" />
          {/* audit */}
          <j-ellipsis value={tempValue} length={15} />【{tempName}】
        </a-tag>

      </p>
    },
    /**
     * 审批意见信息
     * @param {*} opType
     */
    getApprovalCommentHtml(opType) {
      const { itemData } = this
      const { content: { approvalComments } } = this.APCObj[opType] || this.APCObj['默认']
      // "approvalComments": { "labelRuleFun": labelRuleFun_, "valueRuleFun": null, "label": "",
      // "labelKey": "", "value": "", "valueKey": "opDesc" },
      const tempTitle = approvalComments.label || itemData[approvalComments.labelKey] || approvalComments.labelRuleFun && approvalComments.labelRuleFun(itemData)
      const tempValue = approvalComments.value || itemData[approvalComments.valueKey] || approvalComments.valueRuleFun && approvalComments.valueRuleFun(itemData)
      return <p>
        <span class="title">{tempTitle}</span>
        {/* <j-ellipsis value={tempValue || '--'} length={15} /> */}
        <span>
          {tempValue || '--'}
        </span>
      </p>
    },

    /**
     * 自定义组件
     * @param {*} opType
     */
    getCustom(opType) {
      // const { itemData, event } = this
      const { content: { customNameArr } } = this.APCObj[opType] || this.APCObj['默认']
      return customNameArr.map((item, index) => {
        return <p key={item + "-" + index}>
          {/* <component is={'Attachment'}></component> */}
          {this.getAttachment(item)}
        </p>
      })
    },
    /**
     * 附件
     * @param {*} customComponentName
     */
    getAttachment(customComponentName) {
      const { itemData, event } = this
      if (customComponentName == 'Attachment') {
        return <Attachment dataConfig={itemData.files} event={(...args) => { event && event('Attachment', ...args) }}></Attachment>
      }
      return ''
    },
    getOperationProcessHtml(opType) {
      const { itemData } = this
      return <p>操作流程：<j-ellipsis value={itemData.flowName} length={15} /></p>
    }
  },
  render: function (h) {
    const { opType, opTime } = this.itemData
    return (
      <a-timeline-item >
        {
          this.getIconHtml(opType)
        }
        {
          this.getNodeNameHtml(opType)
        }

        <div class="reform" style='min-height: 100px;'>
          <div style=''>
            {
              this.getApproverInfoHtml(opType)
            }
            {/* {this.getOperationProcessHtml(opType)} */}
            {
              this.getApprovalCommentHtml(opType)
            }
            {
              this.getCustom(opType)
            }


          </div>
          <span class="time"><a-icon type="history" style='    margin: 0 5px;' />{opTime}</span>
        </div>
      </a-timeline-item>
    )
  }
}
export default {
  name: 'AuditProcess',
  components: { Attachment, TimelineItem },
  data() {
    return {
      oneStatus: true,
      twoStatus: false,
      threeStatus: true,
      result: {},
      courseData: [],

        // // 此参数必填 用于设置弹窗的  {title:'',visible: false, loading: false, width: '50vw',height: '60vh' }
        // config: { type: Object },
        //       // 此参数必填 用于显示的文件的地址
        //       url: { type: [String, Array] },
        //       // 此参数可选 文件名称
        //       name: { type: [String, Array] },
        //       // 此参数可选 文件后缀
        //       suffix: { type: [String, Array] },
        //       // 此参数必填 执行的事件 关闭
        //       event: { type: Function },
        //       // 此参数可选 用于控制无水印下载按钮的权限标识
        //       vhas:{type:String},
      previewShowConfig: {
        config: { title: '附件预览', visible: false, },
        suffix: '',
        url: ''
      },
    }
  },
  props: {
    entId: { type: [String, Number] },
    bizId: { type: [String, Number] },
    flowCode: { type: [String, Number] },
  },
  watch: {
    // 管理端 企业详情专用
    entId: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object String]') {
          this.pageInit(val);
        }
        if (Object.prototype.toString.call(val) === '[object Number]') {
          this.pageInit(val);
        }
        // console.log('formConfig watch ==>',val);
      },
      deep: true,
      immediate: true
    },
    //
    bizId: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object String]' && val) {
          // this.pageInit(val);
          this.getDataList();
        }
        if (Object.prototype.toString.call(val) === '[object Number]' && val) {
          // this.pageInit(val);
          this.getDataList();
        }
      },
      deep: true,
      immediate: true
    },
  },

  methods: {

    getAPConfig() {
      return auditProcessConfig
    },

    attEvent(type, item) {
      // console.log('附件内容==》', type, item);
      // this.AddWatermark.addWatermark(item.url).then(res => {
      //   this.previewShowConfig.url = res.url
      //   this.previewShowConfig.suffix = item.suffix
      //   this.modalShow()
      // })
      this.previewShowConfig.url = item.url
      this.modalShow()

    },
    modalHidden() {
      this.previewShowConfig.config.visible = false
    },
    modalShow() {
      this.previewShowConfig.config.visible = true
    },
    pageInit(val) {
      getDataForDB('查询企业操作记录', { entId: val }).then(res => {
        if (res.success) {
          this.courseData = res.result || [];
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    getDataList() {
      let params = {};
      params.flowCode = this.flowCode;    //流程编码
      params.flowNo = this.bizId;    //业务主键ID
      getDataForDB('getQueryWorkRecord', params).then(res => {
        if (res.success) {
          this.courseData = res.result || [];
        } else {
          this.$message.warning(res.message)
        }
      })
      // getQueryWorkRecord(params).then(res => {
      //   // console.log('getQueryWorkRecord @@@@@@@==>',res,params);
      //   if (res.success) {
      //     this.courseData = res.result || [];
      //   } else {
      //     this.$message.warning(res.message)
      //   }
      // })
    }
  }
}
</script>

<style lang="less">
.AuditProcess-box {
  width: 100%;

  i {
    font-size: 16px;
  }

  .name {
    white-space: nowrap;
  }

  .title {
    min-width: 60px;
    display: inline-block;
  }


  .ant-timeline-item-content {
    display: flex;
    justify-content: space-between;
  }

  .ant-timeline-item-last>.ant-timeline-item-content {
    min-height: 10px;
  }

  .titleName {
    margin-bottom: 5px;
    display: inline-block;
  }

  .reform {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
  }


  .green {
    color: #32bc51;
  }

  .gray {
    color: #bbbbbb;
  }

  .blue {
    color: #022EA0;
  }

  .red {
    color: #f7434c;
  }

  .orange {
    color: #ffac56;
  }

  //修改时间轴的线条色
  .ant-timeline-item-tail {
    border-left: 1px solid #3659b3;
  }
}
</style>

